<template>
	<view
		class="u-input"
		:class="{
			'u-input--border': border,
			'u-input--error': validateState
		}"
		:style="{
			padding: `0 ${border ? 20 : 0}rpx`,
			borderColor: borderColor,
			textAlign: inputAlign
		}"
		@tap.stop="inputClick"
	>
		<textarea
			v-if="type == 'textarea'"
			class="u-input__input u-input__textarea"
			:style="[getStyle]"
			:value="defaultValue"
			:placeholder="placeholder"
			:placeholderStyle="placeholderStyle"
			:disabled="disabled"
			:maxlength="inputMaxlength"
			:fixed="fixed"
			:focus="focus"
			:autoHeight="autoHeight"
			:selection-end="uSelectionEnd"
			:selection-start="uSelectionStart"
			:cursor-spacing="getCursorSpacing"
			:show-confirm-bar="showConfirmbar"
			@input="handleInput"
			@blur="handleBlur"
			@focus="onFocus"
			@confirm="onConfirm"
		/>
		<input
			v-else
			class="u-input__input"
			:type="type == 'password' ? 'text' : type"
			:style="[getStyle]"
			:value="defaultValue"
			:password="type == 'password' && !showPassword"
			:placeholder="placeholder"
			:placeholderStyle="placeholderStyle"
			:disabled="disabled || type === 'select'"
			:maxlength="inputMaxlength"
			:focus="focus"
			:confirmType="confirmType"
			:cursor-spacing="getCursorSpacing"
			:selection-end="uSelectionEnd"
			:selection-start="uSelectionStart"
			:show-confirm-bar="showConfirmbar"
			@focus="onFocus"
			@blur="handleBlur"
			@input="handleInput"
			@confirm="onConfirm"
		/>
		<view class="u-input__right-icon u-flex">
			<view class="u-input__right-icon__clear u-input__right-icon__item" @tap="onClear" v-if="clearable && value != '' && focused">
				<u-icon size="32" name="close-circle-fill" color="#c0c4cc"/>
			</view>
			<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'">
				<u-icon size="32" :name="!showPassword ? 'eye' : 'eye-fill'" color="#c0c4cc" @click="showPassword = !showPassword"/>
			</view>
			<view class="u-input__right-icon--select u-input__right-icon__item" v-if="type == 'select'" :class="{
				'u-input__right-icon--select--reverse': selectOpen
			}">
				<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
import Emitter from '../../libs/util/emitter.js';


export default {
	name: 'u-input',
	mixins: [Emitter],
	props: {
		value: {
			type: [String, Number],
			default: ''
		},
		
		type: {
			type: String,
			default: 'text'
		},
		inputAlign: {
			type: String,
			default: 'left'
		},
		placeholder: {
			type: String,
			default: '请输入内容'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		maxlength: {
			type: [Number, String],
			default: 140
		},
		placeholderStyle: {
			type: String,
			default: 'color: #c0c4cc;'
		},
		confirmType: {
			type: String,
			default: 'done'
		},
		
		customStyle: {
			type: Object,
			default() {
				return {};
			}
		},
		
		fixed: {
			type: Boolean,
			default: false
		},
		
		focus: {
			type: Boolean,
			default: false
		},
		
		passwordIcon: {
			type: Boolean,
			default: true
		},
		
		border: {
			type: Boolean,
			default: false
		},
		
		borderColor: {
			type: String,
			default: '#dcdfe6'
		},
		autoHeight: {
			type: Boolean,
			default: true
		},
		
		
		selectOpen: {
			type: Boolean,
			default: false
		},
		
		height: {
			type: [Number, String],
			default: ''
		},
		
		clearable: {
			type: Boolean,
			default: true
		},
		
		cursorSpacing: {
			type: [Number, String],
			default: 0
		},
		
		selectionStart: {
			type: [Number, String],
			default: -1
		},
		
		selectionEnd: {
			type: [Number, String],
			default: -1
		},
		
		trim: {
			type: Boolean,
			default: true
		},
		
		showConfirmbar:{
			type:Boolean,
			default:true
		}
	},
	data() {
		return {
			defaultValue: this.value,
			inputHeight: 70, 
			textareaHeight: 100, 
			validateState: false, 
			focused: false, 
			showPassword: false, 
			lastValue: '', 
		};
	},
	watch: {
		value(nVal, oVal) {
			this.defaultValue = nVal;
			
			if(nVal != oVal && this.type == 'select') this.handleInput({
				detail: {
					value: nVal
				}
			})
		},
	},
	computed: {
		
		inputMaxlength() {
			return Number(this.maxlength);
		},
		getStyle() {
			let style = {};
			
			style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
				this.textareaHeight + 'rpx' : this.inputHeight + 'rpx';
			style = Object.assign(style, this.customStyle);
			return style;
		},
		
		getCursorSpacing() {
			return Number(this.cursorSpacing);
		},
		
		uSelectionStart() {
			return String(this.selectionStart);
		},
		
		uSelectionEnd() {
			return String(this.selectionEnd);
		}
	},
	created() {
		
		this.$on('on-form-item-error', this.onFormItemError);
	},
	methods: {
		
		handleInput(event) {
			let value = event.detail.value;
			
			if(this.trim) value = this.$u.trim(value);
			
			this.$emit('input', value);
			
			this.defaultValue = value;
			
			
			
			setTimeout(() => {
				
				// #ifdef MP-TOUTIAO
				if(this.$u.trim(value) == this.lastValue) return ;
				this.lastValue = value;
				// #endif
				
				this.dispatch('u-form-item', 'on-form-change', value);
			}, 40)
		},
		
		handleBlur(event) {
			
			
			setTimeout(() => {
				this.focused = false;
			}, 100)
			
			this.$emit('blur', event.detail.value);
			setTimeout(() => {
				
				// #ifdef MP-TOUTIAO
				if(this.$u.trim(value) == this.lastValue) return ;
				this.lastValue = value;
				// #endif
				
				this.dispatch('u-form-item', 'on-form-blur', event.detail.value);
			}, 40)
		},
		onFormItemError(status) {
			this.validateState = status;
		},
		onFocus(event) {
			this.focused = true;
			this.$emit('focus');
		},
		onConfirm(e) {
			this.$emit('confirm', e.detail.value);
		},
		onClear(event) {
			this.$emit('input', '');
		},
		inputClick() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-input {
	position: relative;
	flex: 1;
	@include vue-flex;

	&__input {
		
		font-size: 28rpx;
		color: $u-main-color;
		flex: 1;
	}

	&__textarea {
		width: auto;
		font-size: 28rpx;
		color: $u-main-color;
		padding: 10rpx 0;
		line-height: normal;
		flex: 1;
	}

	&--border {
		border-radius: 6rpx;
		border-radius: 4px;
		border: 1px solid $u-form-item-border-color;
	}

	&--error {
		border-color: $u-type-error!important;
	}

	&__right-icon {

		&__item {
			margin-left: 10rpx;
		}

		&--select {
			transition: transform .4s;

			&--reverse {
				transform: rotate(-180deg);
			}
		}
	}
}
</style>
